<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="list">
        <!-- <li>
            <h3>周杰伦</h3>
            <div>年龄: 43</div>
            <div>性别: 男</div>
        </li> -->
    </ul>
    <script>
        let list = document.querySelector('.list');
        let arr = [
            {
                name:'mikaisa1',
                age:18,
                sex:'男'
            },
            {
                name:'mikaisa2',
                age:19,
                sex:'男'
            },
            {
                name:'mikaisa3',
                age:20,
                sex:'男'
            },
        ];

        arr.forEach(item=>{
            // ES6中提供的模板字符串，很好的解决了join方式的缺点，让开发更加简单。
            // 不过我告诉你个冷知识，虽然join和模板字符串方式都比传统dom方便，但是他们的渲染速度是比不过传统dom的。不过现在的机器以及浏览器，已经完全可以忽略这点渲染速度上的区别了。
            list.innerHTML += `
            <li>
                <h3>姓名: ${item.name}</h3>
                <div>年龄: ${item.age}</div>
                <div>性别: ${item.sex}</div>
            </li>
            `
        });

    </script>
</body>
</html>